<template>
	<el-dialog title="编辑资料" :visible.sync="dialogData.showDialog" width="450px" @close="cancelForm">
		<el-form
			ref="userDetail"
			:model="userDetail"
			:label-position="labelPosition"
			:label-width="formLabelWidth"
		>
			<el-form-item label="账号">
				<el-input v-model="userDetail.userNo" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="userDetail.userName":disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="userDetail.userPhone"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
				<el-input v-model="userDetail.userAge" type="number"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="userDetail.userGender">
					<el-radio label="男">男</el-radio>
					<el-radio label="女">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="头像">
				<el-upload
					:action="fileUploadInfo.action"
					:headers="fileUploadInfo.headers"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove"
					:on-success="handleSuccess"
					:before-upload="beforeUpload"
				>
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="" />
				</el-dialog>
			</el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelForm()">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
	
export default {
	name: "UpdateProfile",
	props: {
		dialogData: {
			type: Object,
			default: {
				userNo:0,
				showDialog: false,
			},
		},
	},
	data: function () {
		return {
			// 弹出框设置项
			formLabelWidth: "80px",
			labelPosition: "right",
			userDetail:{
				userNo:0,
				userName:"",
				userPhone:"",
				userImage:"",
				userAge:"",
				userGender:"",
			},
			// 上传图片设置
			dialogImageUrl:"",
			dialogVisible: false,
			fileUploadInfo: {
				// 上传图片后端接口地址
				action: this.$Request.domain + "/file/upload",
				// 请求头包装的信息，如果无需验证则无需设置
				// headers: {
				// 	Token: this.$Storage.getItemForLs(this.$TestData.TOKEN_KEY),
				// },
			},
		};
	},
	methods: {
		// 取消按钮
		cancelForm: function () {
			this.dialogData.showDialog = false;
		},
		// 提交按钮
		submitForm: function () {
		console.log(this.userDetail);
		this.$Request
			.fetch_("/userInfo/updateInfo","put",this.userDetail)
			.then((result) => {
				if (result.status == this.$Request.OK_CODE) {
					this.$message.success(result.msg);
					// 关闭对话框，刷新表格数据
					// 将对话框状态 showEditDialog 发送给父组件，由父组件来完成
					this.$emit("emitDialogData", false);
				} else {
					this.$message.info(result.msg);
				}
			})
			.catch((error) => {
				this.$message.error(error);
			});
		},
		// 上传图片相关方法
		// 移除图片调用函数
		handleRemove(file, fileList) {
			// this.$Request
			// 	.fetch("/api/resource/image?imagePath=" + file.src)
			// 	.then((result) => {
			// 		this.$message.info(result.message);
			// 		this.model.images = this.model.images.filter((item) => item.src != file.src);
			// 	})
			// 	.catch((error) => {
			// 		this.$message.info("删除出错。");
			// 	});
		},
		// 图片预览函数
		handlePictureCardPreview(file) {
			console.log("---->");
			console.log(file);
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		// 上传前图片验证
		beforeUpload: function (file) {
			const isJPG = file.type === "image/jpeg";
			const isLt4M = file.size / 1024 / 1024 < 4;
			// if (!isJPG) {
			// 	this.$message.error("图片只能是 JPG 格式!");
			// }
			if (!isLt4M) {
				this.$message.error("图片大小不能超过 4 MB!");
			}
			return isLt4M;
		},
		// 上传成功后处理函数
		handleSuccess: function (response, file, fileList) {
			if (response.status == 200) {
				this.userDetail.userImage = this.$Request.domain + "" + response.data;
				// this.dialogImageUrl = "";
				// this.dialogVisible = false;
				// var image = {};
				// image.userId = this.user.id;
				// image.url = response.data;
				// image.src = response.data;
				// this.model.images.push(image);
			} else {
				this.$message.error("上传图片失败");
			}
		},
	},
	watch:{
		dialogData:function(newVal,oldVal){
			console.log(newVal.userNo);
			if(newVal.userNo!=null){
				var url = "/userInfo/showInfo/" + newVal.userNo;
				this.$Request
					.fetch(url)
					.then((result) => {
						console.log(result);
						this.userDetail = result.data;
					})
					.catch((error) => {
						this.$message.info("没有数据。");
					});
					}
		 }
	},
};
</script>
<style>
</style>
